/**
 * Created by bianbian3 on 2018/8/29.
 */
/**
 * Created by bianbian3 on 2018/8/29.
 */

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, TouchableHighlight, Dimensions, Text, TouchableOpacity, Image } from 'react-native';
import { MtChar, MtCheckItem, MtColor } from 'martian-ui';
const { MtM1, MtT3 } = MtChar;
import { Switch } from 'react-native-switch';
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
const { width, height } = Dimensions.get('window');
import { BoxShadow } from 'react-native-shadow'
class ChooseItems extends Component {
	constructor(props) {
		super(props)
		this.state = {
      currentWindSpeedModel: props.chooseItem && parseInt(props.chooseItem, 10)
		}
	}
	_renderList(list) {
		const last = list.length;
		return list.map( item => this._renderItem(item, last) );
	}
	_renderItem(item, last) {
		return (
			<View style={styles.weedItem} key={item.id}>

				<TouchableOpacity onPress = {this._onWeedItemPressButton.bind(this, item)} >
        <Text>{item.name}</Text>
        </TouchableOpacity>
					<View style={{ flexDirection: 'row', justifyContent:'center', alignItems: 'center', marginTop: 10 }}>
						{last !== item.id ? <Image  style={{ width: 14 }} source={item.id === this.state.currentWindSpeedModel ? require("../../img/xuanzhong_icon.png") : require("../../img/weixuanzhong_icon.png")}/> :
							<Image style={{ width: 14, marginRight: 12 }} source={item.id === this.state.currentWindSpeedModel ? require("../../img/xuanzhong_icon.png") : require("../../img/weixuanzhong_icon.png")}/> }

						{last !== item.id && 	<View style={styles.line}></View> }

					</View>


			</View>
		)
	}
	_onWeedItemPressButton(item) {
	  const {chooseMode} = this.props;
    chooseMode(item.id);
		this.setState({
			currentWindSpeedModel: item.id
		})
	}
	render() {
		const { title, barWidth,barHeight, changeValue, containerStyle, data, chooseItem } = this.props;

		return (
			<View style={[{flex: 1}, containerStyle]}>
				<BoxShadowYaGuan

					width={barWidth}
					height={barHeight}
					renderItem={()=>{
						return (
							<View style={styles.windSpeedView}>
								<Text style={[styles.modelTitle, styles.windSpeedTitle]}>{title}</Text>
								<View style={styles.windSpeedContent}>
									{this._renderList(data)}
								</View>
							</View>
						)
					}}
				/>
			</View>

		);
	}
}

const styles = StyleSheet.create({
	flex: {
		paddingLeft: 20,
		paddingRight: 20,
	},
	modelTitle: {
		textAlign: 'left',
		color: '#333333',
		fontWeight: 'bold',
	},
	line: {
		width: (width-74)/4,
		height: 4,
		backgroundColor: '#EAEAEA',

	},
	windSpeedView: {
		height: 154,
		width: width - 30,
		borderRadius: 6,
		backgroundColor: '#fff',
	},
	windSpeedTitle: {
		marginTop: 24,
		marginLeft: 20,
	},
	windSpeedContent: {
		flexDirection: 'row',
		paddingLeft: 22,
		paddingRight: 22,
		marginTop: 32,
	},
	windSpeedItem: {
		width: 24,
	},
});

module.exports = ChooseItems;
